<template>
  <div>
    <a-modal v-model:open="open" :title="$t('单元类型')" :footer="null" @cancel="cancel" :maskClosable="false">
      <a-form layout="vertical" :model="formState" style="margin-top: 24px;">
        <a-form-item :label="$t('英文名称')">
          <a-input v-model:value="formState.nameEn" maxlength="20"/>
        </a-form-item>
        <a-form-item :label="$t('中文名称')">
          <a-input v-model:value="formState.nameZh" maxlength="20"/>
        </a-form-item>
        <a-form-item :label="$t('阿拉伯名称')">
          <a-input v-model:value="formState.nameAr" maxlength="20"/>
        </a-form-item>
      </a-form>
      <a-row v-if="ifEdit">
        <a-col :span="24" style="display: flex; justify-content: center;">
          <a-button :loading="loading" @click="handleCance">{{ $t('取消') }}</a-button>
          <a-button :loading="loading" type="primary" @click="handleSave">{{  $t('保存') }}</a-button>
        </a-col>
      </a-row>
      <a-table
        class="table-unit"
        :loading="loading"
        :columns="columns"
        :data-source="dataSource"
        :pagination="false">
        <template #bodyCell="{ column, text, record, index }">
          <!-- <template v-if="column.dataIndex === 'operation'">
            <i class="far fa-edit" style="margin-left: 8px;" @click="handleUpdate(record)"/>
          </template> -->
          <template v-if="column.dataIndex === 'icon'">
            <svg-icon :name="text" />
          </template>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, watch, onMounted } from "vue";
import { GetEnterpriseUnitType, PutEnterpriseUnitTypeUuid } from "@/api/organization/index";
import { Modal, message } from 'ant-design-vue';
import { useI18n } from 'vue-i18n';
const { t: $t } = useI18n();

const formState = ref({
  nameEn: null,
  nameZh: null,
  nameAr: null
})

let loading = ref(false)
const dataSource = ref([])
const columns = [
  {
    title: () => {
      return (
        $t('英文名称')
      )
    },
    dataIndex: 'nameEn',
    align: 'left'
  },
  {
    title: () => {
      return (
        $t('中文名称')
      )
    },
    dataIndex: 'nameZh',
    align: 'left'
  },
  {
    title: () => {
      return (
        $t('阿拉伯名称')
      )
    },
    dataIndex: 'nameAr',
    align: 'left'
  },
  {
    title: '',
    dataIndex: 'icon',
    align: 'center'
  },
  // {
  //   title: '',
  //   dataIndex: 'operation',
  //   width: 80
  // }
]
const open = ref(false);
let enterpriseId = ref(null)
const showModal = (record) => {
  open.value = true
  enterpriseId = record.id
  getEnterpriseUnitType()
}
const getEnterpriseUnitType = () => {
  GetEnterpriseUnitType({
    enterpriseId: enterpriseId
  }).then(res => {
    dataSource.value = res.data
  })
}
const ifEdit = ref(false)
const handleUpdate = (record) => {
  formState.value = cloneDeep(record)
  ifEdit.value = true
}
const handleCance = () => {
  ifEdit.value = false
  formRef.value.resetFields();
  formState.value = {}
}
const handleSave = debounce(() => {
  loading.value = true
  PutEnterpriseUnitTypeUuid({...formState.value}).then(res => {
    loading.value = false
    message.success($t('操作成功'));
    getEnterpriseUnitType()
  })
}, 1000);
const cancel = () => {
  open.value = false
  handleCance();
}
defineExpose({
  showModal
});
</script>
<style lang="scss" scoped>
.table-unit {
  margin-top: 16px;
  font-size: 12px;
  ::v-deep {
    .ant-table-wrapper .ant-table-thead >tr>th, .ant-table-wrapper .ant-table-thead >tr>td {
      background-color: #f4f4f4 !important;
    }
    .ant-table-wrapper .ant-table-thead >tr>th {
      background-color: #f4f4f4;
      color: #676a6c;
    }
    .ant-table-wrapper .ant-table-thead >tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
      background: #f4f4f4;
    }
    .ant-table-wrapper .ant-table-thead >tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
      background-color: #f4f4f4;
    }
    .ant-table-wrapper .ant-table {
      font-size: 12px;
    }
  }
}
::v-deep {
  .ant-modal-title {
    font-size: 24px;
    font-weight: bold;
  }
  .ant-form-item .ant-form-item-label >label {
    font-size: 12px;
  }
  .ant-table {
    font-size: 12px !important;
  }
  .ant-table-thead >tr>th {
    background: #fff !important;
    color: #676a6c;
  }
  .ant-table-wrapper .ant-table-thead >tr>th, .ant-table-wrapper .ant-table-thead >tr>td {
    background: #fff !important;
  }
  .ant-table-wrapper .ant-table-thead >tr>th {
    background-color: #fff;
    color: #676a6c;
  }
}
</style>
